<!--
 * @Author: 徐建辰
 * @Date: 2022-04-16 13:55:42
 * @LastEditTime: 2022-04-16 13:55:42
 * @LastEditors: 徐建辰
 * @Description: 全局包裹组件
-->
<template>
  <el-main :style="{background: hasBackground ? background : '', padding}">
    <slot />
  </el-main>
</template>

<script setup>
import {ref, watch, computed} from 'vue'
import useConfigStore from '@/store/config'

// eslint-disable-next-line
defineProps({
  hasBackground: {
    type: Boolean,
    default: false
  },
  padding: {
    type: String,
    default: '0px'
  },
  background: {
    type: String,
    default: '#FFF'
  }
})

const configStore = useConfigStore()

const background = ref('')

const theme = computed(() => configStore.theme)

watch(theme, newVal => {
  background.value = newVal === 'dark' ? '#222225' : '#f0f2f5'
}, {immediate: true})
</script>